/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"
             :model="pageparm"
             class="user-search">
      <el-form-item label="搜索:">
        <el-input size="small"
                  v-model="pageparm.queryString"
                  placeholder="输入用户名或id"></el-input>
      </el-form-item>
      <el-form-item label="">
      </el-form-item>
      <el-form-item>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
                   @click="search">搜索</el-button>
        <el-button size="small"
                   type="primary"
                   icon="el-icon-plus"
                   @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small"
              :data="listData"
              highlight-current-row
              v-loading="loading"
              border
              element-loading-text="拼命加载中"
              style="width: 100%;">
      <el-table-column align="center"
                       type="selection"
                       width="60">
      </el-table-column>
      <el-table-column sortable
                       prop="id"
                       label="用户id"
                       width="200">
      </el-table-column>
      <el-table-column sortable
                       prop="account"
                       label="用户名"
                       width="200">
      </el-table-column>
      <el-table-column sortable
                       prop="password"
                       label="密码"
                       width="300">
      </el-table-column>
      <el-table-column sortable
                       prop="status"
                       label="状态"
                       width="300">
      </el-table-column>
      <el-table-column align="center"
                       label="操作"
                       min-width="300">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm"
                @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title"
               :visible.sync="editFormVisible"
               width="30%"
               @click="closeDialog">
      <el-form label-width="120px"
               :model="editForm"
               :rules="rules"
               ref="editForm">
        <el-form-item label="用户名"
                      prop="account">
          <el-input size="small"
                    v-model="editForm.account"
                    auto-complete="off"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input size="small"
                    v-model="editForm.password"
                    auto-complete="off"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="status">
          <el-switch v-model="editForm.status"
                     active-color="#13ce66"
                     inactive-color="#ff4949"
                     active-text="激活"
                     inactive-text="不激活"
                     active-value="y"
                     inactive-value="n">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button size="small"
                   @click="closeDialog">取消</el-button>
        <el-button size="small"
                   type="primary"
                   :loading="loading"
                   class="title"
                   @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        id: '',
        account: '',
        password: '',
        status: 'y',
        addOrEdit: '',
        token: localStorage.getItem('logintoken'),
      },
      // rules表单验证
      rules: {
        account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },

      //   //   删除？？可以？
      //   formInline: {
      //     page: 1,
      //     limit: 10,
      //     varLable: '',
      //     varName: '',
      //     token: localStorage.getItem('logintoken'),
      //   },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken'),
      },
      userparm: [], //搜索权限
      listData: [], //列表数据
      // 分页参数
      pageparm: {
        currentPage: 1, //当前页码
        pageSize: 10, //每页显示记录数
        total: 0, //总记录数
        queryString: null, //查询条件
      },
    }
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.findPage()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage
      this.pageparm.pageSize = parm.pageSize
      this.findPage()
    },
    // 搜索事件
    search() {
      this.findPage(this.pageparm)
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      //显示编辑界面
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.id = row.id
        this.editForm.account = row.account
        this.editForm.password = row.password
        this.editForm.status = row.status
        this.editForm.addOrEdit = 'edit'
      } else {
        this.title = '添加'
        this.editForm.account = ''
        this.editForm.password = ''
        this.editForm.status = 'y'
        this.editForm.addOrEdit = 'add'
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editForm) {
      //表单校验
      this.$refs[editForm].validate((valid) => {
        //校验通过
        if (valid) {
          //如果是编辑表单
          if (this.editForm.addOrEdit == 'edit') {
            this.$axios
              .post('/rbacManager/edit', this.editForm)
              .then((res) => {
                if (res.data.code == 200) {
                  //弹出成功提示信息
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                  })
                } else {
                  //执行失败
                  this.$message.error(res.data.msg)
                }
              })
              .finally(() => {
                //不管成功还是失败调用分页，待写
                this.findPage()
                //隐藏编辑窗口
                this.editFormVisible = false
              })
          }
          //如果是添加表单
          else if (this.editForm.addOrEdit == 'add') {
            this.$axios
              .post('/rbacManager/add', this.editForm)
              .then((res) => {
                //   console.log(this.editForm)
                //隐藏编辑窗口
                this.editFormVisible = false
                if (res.data.code == 200) {
                  //新增成功后，重新调用分页查询方法，查询出最新的数据
                  this.findPage()
                  //弹出提示信息
                  this.$message({
                    message: res.data.msg,
                    type: 'success',
                  })
                } else {
                  //执行失败，弹出提示
                  this.$message.error(res.data.msg)
                }
              })
              .finally(() => {
                //不管成功还是失败调用分页，待写
                this.findPage()
                //隐藏编辑窗口
                this.editFormVisible = false
              })
          }
        } else {
          //表单校验不通过
          this.$message.error('请输入完整信息!')
          return false
        }
      })
    },
    //分页查询
    findPage() {
      var param = {
        //提交分页相关请求参数（页码，每页记录数、查询条件）
        currentPage: this.pageparm.currentPage,
        pageSize: this.pageparm.pageSize,
        queryString: this.pageparm.queryString,
      }
      //解析Controller响应回的数据，为模型数据赋值
      this.$axios.post('/rbacManager/findPage', param).then((res) => {
        this.pageparm.total = res.data.total
        this.listData = res.data.rows
      })
    },

    // 删除用户
    deleteUser(index, row) {
      /*
        index就是索引，row就是当前行的数据
        */
      //   console.log(index, row)
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$axios
            .delete('/rbacManager/rbac/' + row.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '用户已删除!',
                })
                //重新获取当前页面数据重新渲染列表!这里需要改为自己的查询方法，暂时先不改
                this.findPage()
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.msg,
                })
              }
            })
            .catch((err) => {
              this.loading = false
              this.$message.error('用户删除失败,请稍后再试!')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '删除已取消!',
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    },
  },
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 